<template>
  <div @mousedown="onRotateMousedown" @click="()=>{showRotateImage=true}">
    <img v-show="showRotateImage" :style="rotateImageStyle" :src="rotateImage"/>
    <avue-draggable
    :style="editWidgetStype"
    :step="step"
    :width="widgetsWidth"
    :height="widgetsHeight"
    :disabled="widgetDisabled"
    :left="widgetsLeft"
    :top="widgetsTop"
    ref="draggable"
    :index="index"
    @focus="handleFocus"
    @blur="handleBlur"
  >
    <!-- :z-index="-1" -->
    <component :is="type" :widget-index="index" :value="value" />
  </avue-draggable>
  </div>

</template>

<script>
import widgetHref from "./texts/widgetHref.vue";
import widgetText from "./texts/widgetText.vue";
import WidgetMarquee from "./texts/widgetMarquee.vue";
import widgetTime from "./texts/widgetTime.vue";
import widgetImage from "./texts/widgetImage.vue";
import widgetSlider from "./texts/widgetSlider.vue";
import widgetVideo from "./texts/widgetVideo.vue";
import WidgetIframe from "./texts/widgetIframe.vue";
import widgetBarchart from "./bar/widgetBarchart.vue";
import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue";
import widgetLinechart from "./line/widgetLinechart.vue";
import widgetBarlinechart from "./barline/widgetBarlinechart";
import WidgetPiechart from "./pie/widgetPiechart.vue";
import WidgetFunnel from "./funnel/widgetFunnel.vue";
import WidgetGauge from "./percent/widgetGauge.vue";
import WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRose";
import widgetTable from "./texts/widgetTable.vue";
import widgetLineMap from "./map/widgetLineMap.vue";
import widgetPiePercentageChart from "./percent/widgetPiePercentageChart";
import widgetAirBubbleMap from "./map/widgetAirBubbleMap";
import widgetBarStackChart from "./bar/widgetBarStackChart";
import widgetLineStackChart from "./line/widgetLineStackChart";
import widgetBarCompareChart from "./bar/widgetBarCompareChart";
import widgetLineCompareChart from "./line/widgetLineCompareChart";
import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";
import widgetMoreBarLineChart from "./barline/widgetMoreBarLineChart";
import widgetWordCloud from "./wordcloud/widgetWordCloud";
import widgetHeatmap from "./heatmap/widgetHeatmap";
import widgetRadar from "./radar/widgetRadar";
import widgetBarLineStackChart from "./barline/widgetBarLineStackChart";
import widgetSelect from "./form/widgetSelect";
import widgetInput from "./form/widgetInput.vue";
import widgetFormTime from "./form/widgetFormTime.vue";
import widgetScaleVertical from "./scale/widgetScaleVertical.vue";
import widgetScaleHorizontal from "./scale/widgetScaleHorizontal.vue";
import widgetBarDoubleYaxisChart from "./bar/widgetBarDoubleYaxisChart.vue";

// 组态
import widgetDevice1 from './webConfiguration/widgetDevice1.vue'
import widgetDevice2 from './webConfiguration/widgetDevice2.vue'
import widgetDevice3 from './webConfiguration/widgetDevice3.vue'
import widgetDevice4 from './webConfiguration/widgetDevice4.vue'
import widgetDevice5 from './webConfiguration/widgetDevice5.vue'
import widgetDevice6 from './webConfiguration/widgetDevice6.vue'
import widgetDevice7 from './webConfiguration/widgetDevice7.vue'
import widgetDevice8 from './webConfiguration/widgetDevice8.vue'
import widgetDevice9 from './webConfiguration/widgetDevice9.vue'
import widgetDevice10 from './webConfiguration/widgetDevice10.vue'
import widgetDevice11 from './webConfiguration/widgetDevice11.vue'
import widgetDevice12 from './webConfiguration/widgetDevice12.vue'
import widgetLine from './webConfiguration/widgetLine.vue'



import { eventBus as bus } from "@/utils/eventBus"

export default {
  name: "Widget",
  components: {
    widgetHref,
    widgetText,
    WidgetMarquee,
    widgetTime,
    widgetImage,
    widgetSlider,
    widgetVideo,
    WidgetIframe,
    widgetBarchart,
    widgetGradientColorBarchart,
    widgetLinechart,
    widgetBarlinechart,
    WidgetPiechart,
    WidgetFunnel,
    WidgetGauge,
    WidgetPieNightingaleRoseArea,
    widgetTable,
    widgetLineMap,
    widgetPiePercentageChart,
    widgetAirBubbleMap,
    widgetBarStackChart,
    widgetLineStackChart,
    widgetBarCompareChart,
    widgetLineCompareChart,
    widgetDecoratePieChart,
    widgetMoreBarLineChart,
    widgetWordCloud,
    widgetHeatmap,
    widgetRadar,
    widgetBarLineStackChart,
    widgetScaleVertical,
    widgetScaleHorizontal,
    widgetSelect,
    //widgetInput,
    widgetFormTime,
    widgetBarDoubleYaxisChart,
    widgetDevice1,
    widgetDevice2,
    widgetDevice3,
    widgetDevice4,
    widgetDevice5,
    widgetDevice6,
    widgetDevice7,
    widgetDevice8,
    widgetDevice9,
    widgetDevice10,
    widgetDevice11,
    widgetDevice12,
    widgetLine
  },
  model: {
    prop: "value",
    event: "input",
  },
  
  props: {
    /*
    widget-text widget-marquee widget-href widget-time widget-image widget-slider widget-video widget-table widget-iframe widget-universal
    widget-linechart widget-barlinechart widget-piechart widget-hollow-piechart widget-funnel widget-gauge widget-china-map
    */
    index: Number, // 当前组件，在工作区变量widgetInWorkbench中的索引
    type: String,
    bigscreen: Object,
    value: {
      type: [Object],
      default: () => {},
    },
    step: Number,
  },
  data() {
    return {
      showRotateImage:false,
      isDown:false,
      rotateCenter:{
        centerX:0,
        centerY:0,
      },
      rotateImage:require('../image/rotate.png'),
      data: {
        setup: {},
        data: {},
        position: {},
        /*        leftMargin: null,
        topMargin: null*/
      },
    };
  },
  computed: {
    imgCenterToWidgetCenter(){
      return this.widgetsHeight*0.5 + 20
    },
    rotateImageStyle(){
      let rotate = this.value.position.rotate||0
      let radian = rotate * (Math.PI / 180)
      let relativeLeft = Math.sin(radian) * this.imgCenterToWidgetCenter
      let relativeTop = Math.cos(radian) * this.imgCenterToWidgetCenter
      let left = this.widgetsLeft + this.widgetsWidth*0.5 - 12 + relativeLeft
      let top = this.widgetsTop + this.widgetsHeight*0.5 - 12 - relativeTop
      return {
        position: 'absolute',
        width:'24px',
        height:'24px',
        left:left +'px',
        top:top + 'px',
        zIndex:9999,
        transform: `rotate(${this.value.position.rotate||0}deg)`,
        cursor: 'pointer'
      }
    },
    editWidgetStype(){
      return {
        transform: `rotate(${this.value.position.rotate||0}deg)`
      }
    },
    widgetsWidth() {
      return this.value.position.width;
    },
    widgetsHeight() {
      return this.value.position.height;
    },
    widgetsLeft() {
      return this.value.position.left; // >= this.leftMargin ? this.leftMargin : this.value.position.left;
    },
    widgetsTop() {
      return this.value.position.top; // >= this.topMargin ? this.topMargin : this.value.position.top;
    },
    widgetsZIndex() {
      return this.value.position.zIndex || 1;
    },
    widgetDisabled() {
      return this.value.position.disabled || false;
    },
  },
  mounted() {
    bus.$on('bigscreenDesigner-designer-index-mousemove',(e)=>{
      if(this.isDown){
        this.setRotate(e)
      }
    })
    bus.$on('bigscreenDesigner-designer-index-mouseup',(e)=>{
      this.onRotateMouseup()
    })
  },
  methods: {
    setRotateCenter(){
      const el = this.$refs['draggable'].$el
      const elRect = el.getBoundingClientRect()
     
       // 旋转中心位置
      const centerX = elRect.left + elRect.width / 2
      const centerY = elRect.top + elRect.height / 2
      this.rotateCenter.centerX = centerX
      this.rotateCenter.centerY = centerY
      //  return {
      //   centerX:this.widgetsLeft + this.widgetsWidth * 0.5,
      //   centerY:this.widgetsTop + this.widgetsHeight * 0.5,
      // }
    },
    setDesignerAndDynamic(cotate){
      let index = this.index
      let left = this.value.position.left
      let top = this.value.position.top
      let width = this.value.position.width
      let height = this.value.position.height
      this.value.position.rotate = cotate
      // // 转动后设置 编辑器 和 属性器 的值
      this.$emit("onActivated", { index, left, top, width, height, rotate:this.value.position.rotate||0 });
      this.$refs.draggable.setActive(true);
    },
    setRotate(e){
      const diffX = this.rotateCenter.centerX - e.clientX
      const diffY = this.rotateCenter.centerY - e.clientY
      const radians = Math.atan2(diffY, diffX)
      const cotate = radians * 180 / Math.PI - 90 // 角度
      this.setDesignerAndDynamic(cotate)
    },
    onRotateMousedown(e){
      // e.stopPropagation()
      // e.preventDefault()
      this.isDown = true
      this.setRotateCenter()
      console.log('按住组件')
    },
    onRotateMouseup(e){
      console.log('松开组件')
      this.isDown = false
      this.showRotateImage = false
    },
    handleFocus({ index, left, top, width, height }) {
    },
    handleBlur({ index, left, top, width, height }) {
      this.setRotateCenter()
      this.$emit("onActivated", { index, left, top, width, height, rotate:this.value.position.rotate||0 });
      this.$refs.draggable.setActive(true);
      // 处理widget超出workbench的问题
      //this.handleBoundary({ index, left, top, width, height })
    },
    handleBoundary({ index, left, top, width, height }) {
      // 计算workbench的X轴边界值
      // 组件距离左侧宽度 + 组件宽度 > 大屏总宽度时，右侧边界值 = (大屏宽度 - 组件宽度)；左侧边界值 = 0
      const { bigscreenWidth, bigscreenHeight } = this.bigscreen;
      const xBoundaryValue =
        left + width > bigscreenWidth
          ? bigscreenWidth - width
          : left < 0
          ? 0
          : left;
      // 初始化X轴边界值
      this.leftMargin = left;
      // 计算Y轴边界值
      const yBoundaryValue =
        top + height > bigscreenHeight
          ? bigscreenHeight - height
          : top < 0
          ? 0
          : top;
      // 初始化Y轴边界值
      this.topMargin = top;
      // 若位置超出边界值则重新设置位置
      if (
        this.leftMargin != xBoundaryValue ||
        this.topMargin != yBoundaryValue
      ) {
        this.$nextTick(() => {
          this.leftMargin = xBoundaryValue;
          this.topMargin = yBoundaryValue;
          this.$emit("onActivated", {
            index,
            left: xBoundaryValue,
            top: yBoundaryValue,
            width,
            height,
          });
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.vue-draggalbe {
  position: absolute;
}

.widget-active {
  cursor: move;
  border: 1px dashed #09f;
  background-color: rgba(115, 170, 229, 0.5);
}

.avue-draggable {
  padding: 0 !important;
}

</style>
